<style lang="scss" src="./src/css/table.scss"></style>
<template>
  <div @scroll.stop="" :class="initBodyCss" @wheel="mousewheelHandel">
    <a-table
      ref="tableRef"
      :pagination="false"
      :scroll="tableScroll"
      :columns="calcColumns"
      :data-source="calcDataSource"
      :row-selection="calcRowRelection"
      :loading="loading"
      v-ant-ref="initAfterTableHandel"
      v-bind="initTableProps"
      v-on="$listeners">
      <!-- 遍历子组件非作用域插槽，并对父组件暴露 -->
      <template v-for="(slotIndex, name) in $slots" v-slot:[name]>
        <slot :name="name" />
      </template>
      <template
        v-for="(slotIndex, name) in $scopedSlots"
        :slot="name"
        slot-scope="text, record, index">
        <slot :name="name" v-bind="{ text, record, index }"></slot>
      </template>
      <template v-if="column.dropdownMenus" slot-scope="{ column, confirm }" slot="dropdownMenus">
        <UiTitleRightDropdown
          @updataColumns="updataColumns"
          :column="column"
          :columns="calcColumns"
          :fieldsOptionMenus="fieldsOptionMenus"
          :confirm="confirm"
          :menus="getSliceTitleRightMenus(column)">
        </UiTitleRightDropdown>
      </template>
      <a-icon
        slot="dropdownIcon"
        slot-scope="filtered"
        type="caret-down"
        :style="{ color: filtered ? '#108ee9' : undefined }" />
    </a-table>
    <div v-if="pagination" class="virtually-pagination">
      <div class="virtually-pagination-slot">
        <slot name="pagination"></slot>
      </div>
      <a-pagination
        v-bind="calcPaginationOption"
        :current="calcPaginationOption.page"
        @change="paginationChange"
        @showSizeChange="paginationShowSizeChange" />
    </div>
    <ui-scrollbar-x
      v-if="openScrollbarX"
      ref="tableScrollX"
      :paginationHeight="paginationHeight"
      :calcLineHeight="calcLineHeight"
      :width="outerClientRect.width"
      :dataWidth="tableColumnsWidth"
      @scroll="scrollXHandel">
    </ui-scrollbar-x>
    <ui-scrollbar-y
      v-if="openScrollbarY"
      ref="tableScroll"
      :calcLineHeight="calcLineHeight"
      :height="scrollHeight"
      :tableHeaderHeight="calcLineHeight"
      :tableBodyHeight="tableDom.tableBodyHeight"
      :tableDataHeight="tableDataHeight"
      @scroll="scrollYHandel">
    </ui-scrollbar-y>
  </div>
</template>

<script>
  import UiScrollbarX from './src/components/ui-scrollbar-x.vue';
  import UiScrollbarY from './src/components/ui-scrollbar-y.vue';
  import UiTitleRightDropdown from './src/components/ui-title-right-dropdown.vue';

  import InitMixin from './src/mixins/init-mixin.js';
  import InitEventsMixin from './src/mixins/init-events-mixin.js';
  import InitRenderAfterMixin from './src/mixins/init-render-after-mixin.js';
  import TitleRightMenuMixin from './src/mixins/title-right-menu-mixin.js';
  import CustomRowHandelMixin from './src/mixins/custom-row-handel-mixin.js';
  import paginationMixin from './src/mixins/pagination-mixin.js';

  // default 54 | middle 46 | small 38
  // TODO: 性能优化
  export default {
    components: { UiScrollbarY, UiScrollbarX, UiTitleRightDropdown },
    name: 'AVirtuallyTable',
    inheritAttrs: false,
    mixins: [
      InitMixin,
      InitEventsMixin,
      InitRenderAfterMixin,
      TitleRightMenuMixin,
      CustomRowHandelMixin,
      paginationMixin
    ],
    props: {
      minColumnWidth: {
        type: Number,
        default: 100
      },
      isAbsolute: {
        type: Boolean,
        default: false
      },
      pagination: {
        type: Boolean,
        default: false
      },
      titleRightMenus: {
        type: Object
      },
      openVirtuallyModel: {
        type: Boolean,
        default: true
      },
      columns: {
        type: Array
      },
      dataSource: {
        type: Array
      },
      loading: {
        type: Boolean
      }
    },
    data() {
      return {
        // 表格所有数据
        scrollTop: 0,
        // 开始索引
        startIndex: 0
      };
    },
    // 计算属性
    computed: {},
    updated() {
      console.log('updated:---->');
      // console.timeEnd(`updated:-------scoll`);
    },
    created() {
      Object.keys(this.$props).forEach((key) => {
        this.$watch(key, () => {
          console.time(`updated:-------table-change-${key}`);
          this.$nextTick(() => {
            console.timeEnd(`updated:-------table-change-${key}`);
          });
        });
      });
    },
    mounted() {},
    watch: {
      columns() {
        this.cleanTableCatch();
        this.initTable();
        this.initAfter();
        this.initAfterScrollBarX();
        this.initAfterScrollTableBody();
      },
      dataSource() {
        this.resizeTable();
        this.initAfterScrollTableBody();
        this.$nextTick(() => {
          this.initAfterEmptyHeight();
        });
      }
    },
    methods: {}
  };
</script>
